<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/userInfo.css">

  <script src="../bootstrap/js/jquery.min.js"></script>
  <script src="../bootstrap/js/bootstrap.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/collect.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../js/element-ui.js"></script>
</head>
<title>个人中心</title>
<body>
<div id="ulInfo">
  <!-- 导航 -->
  <nav class="navbar navbar-expand-md bg-white navbar-light fixed-top" style="font-size: 16px;">
    <h1 class="title">
      <a class="navbar-brand" href="#">
        <img src="../img/studyLogo.png" alt="logo" width="40" height="40">
      </a>
    </h1>
    <!-- 折叠按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="../main.html">首页</a></li>
        <!--<li class="nav-item"><a class="nav-link" href="collect.html">收藏</a></li>-->
        <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                            href="videoUpload.html">上传视频</a>
        </li>
        <li v-if="(currentUser.roleId == 2 || currentUser.roleId == 0)" class="nav-item"><a class="nav-link"
                                                                                            href="videoManager.html">视频管理</a>
        </li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="userManager.html">用户管理</a>
        </li>
        <li v-if="currentUser.roleId == 0" class="nav-item"><a class="nav-link" href="functionManager.html">权限管理</a></li>
        <!--下拉-->
        <li class="dropdown" style="margin-right: 450px">
          <a class="dropdown-toggle nav-link" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false" style="cursor:pointer;">我的 <span class="caret"></span></a>
          <ul class="dropdown-menu" style="text-align: center;">
            <li><a style="color: #6c757d;" href="userInfo.html">个人中心</a></li>
            <li><a style="color: #6c757d;" href="collect.html">我的收藏</a></li>
            <li><a style="color: #6c757d;" href="browse.html">浏览记录</a></li>
            <li><a style="color: #6c757d;" href="../userExit">退出登录</a></li>
          </ul>
        </li>

        <template v-if="currentUser.account == null">
          <li class="nav-item"><a class="nav-link" href="../login.html">你好,请登录</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../register.html">免费注册</a></li>
        </template>
        <template v-if="currentUser.account != null">
          <li class="nav-item"><a class="nav-link" href="userInfo.html">欢迎你：{{currentUser.account}}</a></li>
          <li class="nav-item"><a class="nav-link" href="#">|</a></li>
          <li class="nav-item"><a class="nav-link" href="../userExit">退出</a></li>
        </template>
      </ul>
      <form id="formSearch" action="" class="form-inline ml-auto">
        <input id="searchInput" type="text" v-model="keyword" class="form-control mr-sm-2" placeholder="Search"
               @change="searchVideo">
        <input @click="searchVideo" type="button" class="btn btn-outline-secondary  my-2 my-sm-0" value="搜索">
      </form>
    </div>
  </nav>

  <!-- 风格展示区 -->
  <div class="trend-style bg-light" id="itemInfo">
    <!--主体开始-->
    <div class="box" id="collectInfo">
      <div class="box_con">
        <!-- 主体内容 -->
        <div class="main comWidth clearfix" style="margin-top: 40px;min-height: 600px">
          <!-- 展示区 -->
          <div class="showBar fl">
            <h3 style="text-align: center;margin-top: 30px">个人信息</h3>
            <table class="table" ref="table" id="table"
                   style="margin: 10px auto;width: 80%;font-size: 18px; font-family: '微软雅黑';">
              <tr>
                <td colspan="3"><img onclick="editHeadPic()" style="cursor:pointer;border-radius: 24px"
                                     id="headpic" :src="'../upload/'+currentUser.userDetail.headPicUrl"
                                     width="100px" height="100px" alt=""></td>
              </tr>
              <tr class="hover">
                <th>账号</th>
                <td>{{currentUser.account}}</td>
              </tr>
              <tr class="hover">
                <th>姓名</th>
                <td ondblclick="edit(this)" style="cursor:pointer;" name="editInfo" editType="name">
                  {{currentUser.userDetail.name}}
                </td>
              </tr>
              <tr class="hover">
                <th>性别</th>
                <td ondblclick="edit(this)" style="cursor:pointer;" name="editInfo" editType="sex">
                  {{currentUser.userDetail.sex}}
                </td>
              </tr>
              <tr class="hover">
                <th>生日</th>
                <td ondblclick="edit(this)" style="cursor:pointer;" name="editInfo" editType="birthday">
                  {{currentUser.userDetail.birthday | formatDate}}
                </td>
              </tr>
              <tr class="hover">
                <th>地址</th>
                <td ondblclick="edit(this)" style="cursor:pointer;" name="editInfo" editType="address">
                  {{currentUser.userDetail.address}}
                </td>
              </tr>
            </table>

          </div>
          <!-- 侧边栏 -->
          <div class="fr">
            <div class="sideBar">
              <h3 class="relation">热门视频推荐<span class="icon-relation fr"></span></h3>
              <ul class="resoureList">
                <li v-for="item in browseCountList">
                  <a :href="'../showVideoDetail?vid='+item.vid" class="icon-file text_overflow"
                     v-text="item.videoName">视频名称</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
</body>
<script src="../js/diqu2.js"></script>
<script type="text/javascript">
  let userId = "";
  let message = null;
  /*用户信息*/
  new Vue({
    el: "#ulInfo",
    data() {
      return {
        currentUser: "",
        browseCountList: "",
        keyword: "",
      }
    },
    methods: {
      searchVideo: function () {
        window.location.href = "search.html?keyword=" + this.keyword;
      },
      getVideoBrowseByTop: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios.get("../getVideoByTop?column=browseCount")
          .then(result => {
            loading.close();
            this.browseCountList = result.data;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },
      getCurrentUser: function () {
        const loading = this.$loading({lock: true, text: 'Loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});

        axios.get("../getCurrentUser")
          .then(result => {
            loading.close();
            this.currentUser = result.data;
            userId = this.currentUser.uid;
          })
          .catch(function (error) {
            loading.close();
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
      },
    },
    mounted() {
      message = this.$message;
      this.getCurrentUser();
      this.getVideoBrowseByTop();
    },
    filters: {
      formatDate(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var date = date.getDate();
        return year + "-" + month + "-" + date
      },
    }
  });

  //修改头像
  function editHeadPic() {
    let td = $("#headpic").parent();
    td.append("<input type='file' id='EditHeadPic' name='EditHeadPic' style='display: none'>");

    let EditHeadPic = $("#EditHeadPic");

    EditHeadPic.click();
    //为图片选择框绑定change事件
    EditHeadPic.change(function () {
      let reader = new FileReader();
      reader.onloadend = function (e) {
        //修改图片的src属性，显示新的图片
        document.getElementById('headpic').src = e.target.result;
      }
      reader.readAsDataURL(this.files[0]);  // 读取文件内容
      let formData = new FormData();
      formData.append('EditHeadPic', this.files[0]);

      $.ajax({
        url: "../userInfoUpdate?uid=" + userId + "&editType=headPicUrl",
        type: "POST",
        data: formData,
        cache: false,
        processData: false,
        contentType: false,
      });
    });
  }

  //编辑信息
  function edit(td) {
    //获取旧文本
    let old = td.innerText;
    //获取修改的类型
    let type = td.getAttribute('editType');
    if (type === "birthday") {
      td.innerHTML = "<input type='date' size='20' style='width:30%;'>";
    } else if (type === "sex") {
      td.innerHTML = "<input type='radio' name='sex' value='男'>&nbsp;男&nbsp;" +
        "<input type='radio'  name='sex' value='女' >&nbsp;女&nbsp;" +
        "<input type='radio'  name='sex' value='保密' >&nbsp;保密&nbsp;";

      //设置选中
      $(":radio[name='sex'][value='" + old + "']").prop("checked", "checked");

      let interval = setInterval(setSex, 1000);

      function setSex() {
        let radio = $("input[type='radio']:checked");
        let newText = radio.val();

        if (newText !== old && (newText === "男" || newText === "女" || newText === "保密")) {
          clearInterval(interval);

          axios.get("../userInfoUpdate?uid=" + userId + "&editType=sex&newText=" + newText)
            .then(result => {
              td.innerHTML = newText;
              message.success("更新成功")
            }).catch(function (error) {
            td.innerText = old;
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
        }
      }

      return;
    } else if (type === "address") {
      //地区选择
      td.innerHTML = "<select name='sheng'></select>  <select name='shi'></select>  <select name='qu'></select>";
      let select = new PCAS("sheng", "shi", "qu", "", "", "");


      let interval = setInterval(setText, 1000);

      function setText() {
        let sheng = select.SelP.options[select.SelP.selectedIndex].value;
        let shi = select.SelC.options[select.SelC.selectedIndex].value;
        let qu = select.SelA.options[select.SelA.selectedIndex].value;
        let newText = sheng + shi + qu;
        if (qu !== "--请选择地区--" && qu !== "" && shi !== "--请选择地区--") {
          clearInterval(interval);


          axios.get("../userInfoUpdate?uid=" + userId + "&editType=address&newText=" + newText)
            .then(result => {
              td.innerHTML = newText;
              message.success("更新成功")
            }).catch(function (error) {
            td.innerText = old;
            message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
          })
        }
      }

      return;
    } else {
      //修改其他
      td.innerHTML = "<input type='text' size='20' style='width:50%;'>";
    }
    let input = td.firstChild;

    input.value = old;
    input.select();
    //绑定输入框失去焦点事件,更新
    input.onblur = function () {
      update(this, old, type);
    }
  }

  /**
   * 失去焦点，更新
   */
  function update(input, old, type) {
    let newText = input.value;
    //input的父节点是td
    let TD = input.parentNode;

    if (!newText) {
      message.error('您的输入为空，修改失败！');
      TD.innerText = old;
      return;
    }

    axios.get("../userInfoUpdate?uid=" + userId + "&editType=" + type + "&newText=" + newText)
      .then(result => {
        TD.innerText = newText;
        if (newText != old) {
          message.success("更新成功")
        }
      }).catch(function (error) {
      TD.innerText = old;
      message.error(error.response.data);
            if (error.response.status === 401) window.location.href = "../login.html";
    })
  }
</script>
</html>
